<template>
  <div id="chart-container">
    <svg ref="svgRef"></svg>
  </div>
</template>
  
  <script setup>
import * as d3 from "d3";
import { ref, onMounted } from "vue";

const svgRef = ref(null);
const data = [10, 20, 30, 40, 50]; // 示例数据

onMounted(() => {
  const svg = d3.select(svgRef.value); // 使用D3选择SVG元素
  const width = 500; // SVG容器的宽度
  const height = 300; // SVG容器的高度
  const barPadding = 5; // 柱状图之间的间隔
  const barWidth = width / data.length; // 单个柱状图的宽度

  svg.attr("width", width).attr("height", height); // 设置SVG的宽度和高度

  // 选择所有的矩形（目前没有），然后绑定数据
  svg
    .selectAll("rect")
    .data(data) // 绑定数据到矩形
    .enter() // 创建占位符元素
    .append("rect") // 添加矩形元素
    .attr("y", (d) =>{
      // console.debug('%c  d','font-size:30px;',d)
      return  height - d * 5
    }) // 设置矩形的y坐标
    .attr("height", (d) => d * 5) // 设置矩形的高度，根据数据值
    .attr("width", barWidth - barPadding) // 设置矩形的宽度
    .attr("transform", (d, i) => {
      // 设置矩形的平移，用于在SVG中定位
      const translate = [barWidth * i, 0]; // 计算平移向量
      return `translate(${translate})`; // 应用平移
    });
});
</script>
  
  <style>
#chart-container {
  text-align: center;
}
</style>
  